<template>
  <div class="login-container">
    <div class="contain">
      <!-- 右上角 -->
      <div>
        <img src="../../assets/common/u4.png" alt="" class="rightBgc">
      </div>
      <!-- 左上角 -->
      <div>
        <img src="../../assets/common/u3.png" alt="" class="leftBgc">
      </div>
      <!-- 左下角 -->
      <div>
        <img src="../../assets/common/u5.png" alt="" class="ltbgc">
      </div>
      <div class="content">
        <div class="left">
          <img src="../../assets/common/u25.png" alt="">
        </div>

        <el-card>
          <h3>
            <img src="../../assets/common/u24.png" alt="">
            <span>电 商 后 台 管 理</span>
          </h3>
          <el-form ref="form" :model="form" :rules="rules">
            <el-form-item prop="username">
              <el-input
                v-model="form.username"
                placeholder="账号"
                class="user"
              />
              <img src="../../assets/common/u13.png" alt="">
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="form.password"
                type="password"
                prefix-icon="el-icon-lock"
                placeholder="密码"
              />
            </el-form-item>
            <el-form-item prop="yzm">
              <el-input
                v-model="form.yzm"
                placeholder="验证码"
                style="width: 252px"
              />
              <div class="yzm">
                <span>5 </span>
                <span>7</span>
                <span>6</span>
                <span>9</span>
              </div>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="dr">登入</el-button>
            </el-form-item>
          </el-form>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Login',
  data() {
    return {
      loginForm: {
        mobile: '13800000002',
        password: '123456'
      },
      loginRules: {},
      passwordType: 'password',
      redirect: undefined,
      form: {
        username: '',
        password: '',
        yzm: ''
      },
      rules: {
        username: [
          { required: true, message: '请输入账号或手机号', trigger: 'blur' },
          {
            pattern: /^1[3-9]\d{9}$/,
            message: '手机号格式不正确',
            trigger: 'blur'
          }
        ],
        password: [
          { required: true, message: '密码不能为空', trigger: 'blur' },
          { min: 6, max: 16, message: '密码长度6-16位', trigger: 'blur' }
        ],
        yzm: [
          { required: true, message: '输入正确验证码', trigger: 'blur' },
          { pattern: /^[5][7][6][9]$/, message: '验证码不对', trigger: 'blur' }
        ]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  methods: {
    showPwd() {
      if (this.passwordType === 'password') {
        this.passwordType = ''
      } else {
        this.passwordType = 'password'
      }
      this.$nextTick(() => {
        this.$refs.password.focus()
      })
    },
    // 点击登录执行的方法
    // handleLogin() {
    //   this.$router.push('/')
    // },
    async dr() {
      const value = await this.$refs.form.validate()
      // console.log(value)
      if (value) {
        this.$router.push('/')
      }
    }
    // dr() {
    //   const a = this.$refs.form.validate()
    //   console.log(a)
    // }
  }
}
</script>

<style lang="scss">
* {
  margin: 0;
  padding: 0;
}
// 全局生效的样式
/* 修复input 背景不协调 和光标变色 */
/* Detail see https://github.com/PanJiaChen/vue-element-admin/pull/927 */
html,
body {
  height: 100%;
  width: 100%;
  position: absolute;
}
.login-container {
  position: relative;
  height: 746px;
  width: 1519px;
  left: 0px;
  top: 0px;
  overflow: hidden;
}
.contain {
  width: 100%;
  height: 100%;
  z-index: -1;
  background-image: linear-gradient(#3fccfd, #996cfb); // 设置背景图片
  background-position: center; // 将图片位置设置为充满整个屏幕
  background-size: 100% auto;
}
.rightBgc {
  position: absolute;
  right: 0;
  top: -30%;
}
.leftBgc {
  position: absolute;
  left: 17px;
  top: 24px;
}
.ltbgc {
  position: absolute;
  left: -229px;
  bottom: -300px;
}
.content {
  width: 900px;
  height: 403px;
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  .left {
    float: left;
  }
  // background-color: #fff;
  .el-card {
    float: left;
    width: 400px;
    height: 400px;
    box-sizing: border-box;
    border-radius: 20px;
    .el-card__body {
      width: 400px !important;
      height: 400px !important;
      padding: 20px;
      padding-left: 31px;
      padding-top: 0;
    }
    h3 {
      width: 360px;
      height: 120px;
      display: flex;
      align-items: center;
      justify-content: center;
      // margin-left: 33px;
      span {
        padding-left: 10px;
        font-size: 25px;
        font-weight: 600;
        color: rgb(67, 141, 238);
      }
    }
    .el-form {
      .el-button {
        width: 100%;
      }
      .user {
        position: relative;
        ::placeholder {
          padding-left: 19px;
        }
      }
      img {
        position: absolute;
        left: 4px;
        top: 8px;
      }
      .el-input__inner {
        position: relative;
      }
      .yzm {
        position: absolute;
        top: 1px;
        right: 0;
        width: 96px;
        height: 37px;
        background-color: #dc6666;
        display: flex;
        align-items: center;
        justify-content: space-around;
      }
    }
  }
}
</style>
